<template>
  <div class="star">
    <span v-for="(item,i) in itemClasses" :class="item" class="star-item" :key="i"></span>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    score: {
      type: Number,
      default() {
        return 3.5
      }
    }
  },
  computed: {
    itemClasses() {
      const Len = 5
      const ON = 'on'
      const OFF = 'off'
      const HALF = 'half'
      const integer = Math.floor(this.score)
      const hasHalf = this.score % 1 !== 0
      let result = []
      for (let i = 0; i < integer; i++) {
        result.push(ON)
      }
      if (hasHalf) {
        result.push(HALF)
      }
      while (result.length !== Len) {
        result.push(OFF)
      }
      return result
    }
  }
}
</script>
<style scoped>
.star {
  height: 20px;
}
.star span {
  display: inline-block;
  width: 20px;
  height: 20px;
}
.on {
  background-image: url(~assets/img/range/all.png);
  background-size: contain;
}

.half {
  background-image: url(~assets/img/range/half.png);
  background-size: contain;
}

.off {
  background-image: url(~assets/img/range/gray.png);
  background-size: cover;
}
</style>
